@tile-background-color: #D48623;
@tile-front-color: #FFF9E5;

@tile-height: 75px;
@tile-height-other: @tile-height*5/9;
@tile-height-mobile: 33.3333px;
@tile-height-other-mobile: @tile-height-mobile*7/9;
@tile-height-text: 18px;

@tile-width: 55px;
@tile-width-other: @tile-width*5/9;
@tile-width-mobile: 24.66666px;
@tile-width-other-mobile: @tile-width-mobile*7/9;
@tile-font-height: 71px;
@tile-font-height-mobile: 53px;
@tile-width-text: 13.2px;

h1,
h2 {
    font-size: 30px;
    line-height: 40px;
}

h3 {
    font-size: 18px;
}


body {
    padding: 50px;
    background-color: #275001;
    color: #FFFBE9;
}

body.mobile {
    padding: 30px 2px;
}

a {
    color: #00B7FF;
}

a.tile-holder {
    color: #00B7FF;
    background: #FFFBE9;
    padding: 4px;
    border-radius: 8px;
    margin: 4px;
    -moz-box-shadow: 4px 4px 0px #000;
    -webkit-box-shadow: 4px 4px 0px #000;
    box-shadow: 4px 4px 0px #000;
    width: @tile-width;
    height: @tile-height;
}

.mobile a.tile-holder {
    margin: 1px;
}

#player-tiles .tile-holder:hover {
    // margin-top: -8px;
}

.other-player a.tile-holder {
    width: @tile-width-other;
    height: @tile-height-other;
    padding: 3px;
    margin: 2px;
}

.mobile .other-player a.tile-holder {
    width: @tile-width-other-mobile;
    height: @tile-height-other-mobile;
    padding: 3px;
    margin: 1px;
}

.mobile .other-player .hand-tiles {
    display: none;
}

.tile-row { font-size: @tile-font-height; }

.other-player .tile-row { font-size: @tile-font-height/2; }

.mobile a.tile-holder {
    width: @tile-width-mobile;
    height: @tile-height-mobile;
}

h3 a.tile-holder {
    width: @tile-width-text;
    height: @tile-height-text;
    padding: 3px;
    margin: 0px;
    border-radius: 4px;
}

.mobile .tile-row { font-size: @tile-font-height-mobile; }

a.selected {
    border: 4px solid #FF0000;
    margin-top: 2px;
    margin-left: 2px;
    padding: 1px;
}

.mobile a.selected {
    margin: 2px 2px;
    padding: 2px;
}

.left { float: left; }
.right { float: right; }
.clr {overflow:hidden; zoom:1}
.small{font-size:12px}
.dim{color:#999}
.br-top {padding-top: 8px;}
.br{ padding-bottom: 8px;}
.hide { display: none; }
.tile { width: @tile-width;
        height: @tile-height;
        background-size: @tile-width @tile-height;
        background-repeat: no-repeat;}
.other-player .tile {
    width: @tile-width-other;
    height: @tile-height-other;
    background-size: (@tile-width-other - 1) (@tile-height-other - 1);
}
.mobile .other-player .tile {
    width: @tile-width-other-mobile;
    height: @tile-height-other-mobile;
    background-size: (@tile-width-other-mobile - 1) (@tile-height-other-mobile - 1);
}
.mobile .tile { width: @tile-width-mobile; height: @tile-height-mobile; background-size: @tile-width-mobile @tile-height-mobile; }
h3 .tile { width: @tile-width-text; height: @tile-height-text; background-size: @tile-width-text @tile-height-text; }
.padded { padding: 8px; }
.br-top { margin-top: 8px; }
.br { margin-bottom: 8px; }

.center { text-align: center; }

// Create bamboo and ball tiles 0-17
@num-tiles-in-suit: 9;
@bamboo: bamboo;
@ball: ball;
.makeTile(@type; @tile-value; @i) {
    .tile-@{tile-value} {
        background-image: url('../../img/tiles/@{type}_@{i}.png');
    }
}
.makeTiles(@type; @tile-value; @i) when (@i > 0) {
    .makeTile(@type; @tile-value; @i);
    .makeTiles(@type; (@tile-value - 1); (@i - 1));
}
.makeTiles(@bamboo; (@num-tiles-in-suit - 1); @num-tiles-in-suit);
.makeTiles(@ball; (@num-tiles-in-suit - 1 + 9); @num-tiles-in-suit);

.tile-18 { background-image: url(../../img/tiles/wind_east.png); }
.tile-19 { background-image: url(../../img/tiles/wind_south.png); }
.tile-20 { background-image: url(../../img/tiles/wind_west.png); }
.tile-21 { background-image: url(../../img/tiles/wind_north.png); }
.tile-22 { background-image: url(../../img/tiles/dragon_white.png); }
.tile-23 { background-image: url(../../img/tiles/dragon_green.png); }
.tile-24 { background-image: url(../../img/tiles/dragon_red.png); }
.tile-25 { background-image: url(../../img/tiles/character_1.png); }
.tile-26 { background-image: url(../../img/tiles/character_9.png); }
.tile-placeholder { background-image: url(../../img/tiles/flower_plum.png); }
.tile-holder.hidden { background-color: @tile-background-color; }
.hidden .tile { background-image: none; }


.last-tile { margin-left: .5em; }
.discard-tiles { width: 80%; }
.other-player .discard-tiles {
    width: 100%;
    margin: 0;
}
.other-player {
    width: 50%;
    float: left;
}
.this-player {
    position: absolute;
    bottom: 1em;
}
#notifications {
    position: absolute; left: 10px; top: 10px;
}
#player-info {
    position: absolute; right: 10px; top: 10px;
}
.rotated-tile {
    // TODO(gleitz): use this
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 35% 50%;
    margin-left: 28px;
}
.side {
    float: left;
    margin-left: .5em;
}
.side a, .other-player a {
    cursor: default;
}
.buttons {
    float: left;
    font-size: 32px;
}

.mobile .name {
    display: none;
}

#audio {
    display: none;
}

#msg-other {
    margin-left: 8px;
}

.qtip-mahjong {
    background-color: @tile-background-color;
    border-color: #000;
    color: @tile-front-color;
}

.qtip-mahjong .qtip-content {
    text-align: center;
}

.qtip-mahjong .qtip-close {
    border-color: #000;
    background: @tile-front-color;
}

.shadowed {
    text-shadow: 2px 2px #000;
}

.no-decoration {
    text-decoration: none;
}

.clickable {
    cursor: pointer;
}